import { Space } from 'antd';
import { SceneCardC, SecondHeaderC } from '../../components';
import { useState } from 'react';

const SceneCardCDemo = () => {
  const moveChange = (type, id) => {
    console.log(type, id, '上下移动事件');
  };
  const [checked, setChecked] = useState(false);
  return (
    <div>
      <Space style={{ margin: '0 20px', width: 'calc(100vw - 300px)' }} direction='vertical'>
        <SceneCardC
          width={'500px'}
          showChecked={true}
          title={'复选框 上下移动按钮并设置width:500px'}
          upDisabled={true}
          tooltip={
            <div>
              <p>111111111111</p>
              <p>111111111111</p>
            </div>
          }
          showMove={true}
          moveChange={moveChange}
          id={'113e333333'}
          checked={checked}
          onChecked={(e, id) => {
            console.log(e, id, '是否选中');
            setChecked(e);
          }}
          content={
            <div>
              <p>111111111111</p>
              <p>111111111111</p>
              <p>111111111111</p>
              <p>111111111111</p>
              <p>111111111111</p>
              <p>111111111111</p>
              <p>111111111111</p>
            </div>
          }
        />
        <SceneCardC
          title={'只有展开收起功能 width:100%'}
          id={'113e333333'}
          style={{
            margin: '20px 0',
          }}
          content={
            <div>
              <p>111111111111</p>
              <p>111111111111</p>
              <p>111111111111</p>
              <p>111111111111</p>
              <p>111111111111</p>
              <p>111111111111</p>
              <p>111111111111</p>
            </div>
          }
        />
        <SceneCardC
          title={'有展开收起+提示语+新增'}
          tooltip={
            <div>
              <p>111111111111</p>
              <p>111111111111</p>
            </div>
          }
          id={'113e333333'}
          showAdd={true}
          onClickAdd={(id) => {
            console.log(id, '点击新增的卡片id');
          }}
          content={
            <div>
              <p>111111111111</p>
              <p>111111111111</p>
              <p>111111111111</p>
              <p>111111111111</p>
              <p>111111111111</p>
              <p>111111111111</p>
              <p>111111111111</p>
            </div>
          }
        />
      </Space>
    </div>
  );
};
export default SceneCardCDemo;
